<template>
  <div>
    <div>
      <span style="font-weight: bold;color: #0059ff">采购订单基础信息</span>
      <el-divider />
    </div>
    <div class="select-supplier">
      <el-descriptions class="margin-top" title="供应商" :column="3" :size="'medium'" border>
        <span slot="title" style="font-size: 20px;"><i class="el-icon-edit-outline" />供应商</span>
        <template slot="extra">
          <el-button icon="el-icon-coin" @click="opDialog">选择数据</el-button>
        </template>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-loading" />
            供应商编码
          </template>
          {{ supplier.id }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-lollipop" />
            供应商名称
          </template>
          {{ supplier.name }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user" />
            供应商联系人
          </template>
          {{ supplier.contact }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-phone-outline" />
            联系人电话
          </template>
          {{ supplier.phone }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building" />
            供应商地址
          </template>
          {{ supplier.address }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-s-custom" />
            采购负责人
          </template>
          {{ name }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <el-dialog title="选择数据" :visible.sync="centerDialogVisible" width="50%" center tooltip-effect="dark">
      <el-table :data="supplierList" border highlight-current-row @current-change="handleCurrentChange">
        <el-table-column property="id" label="供应商编码" />
        <el-table-column property="name" label="供应商名称" />
        <el-table-column property="address" label="供应商地址" />
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deselect">取 消</el-button>
        <el-button @click="determine">确 定</el-button>
      </span>
    </el-dialog>
    <el-divider v-text="supplier">{{ supplier.name }}产品信息</el-divider>
    <el-table ref="multipleTable" :data="productList" tooltip-effect="dark" @selection-change="handleSelectionChange">
      <el-table-column type="selection" />
      <el-table-column prop="product.id" label="序号" />
      <el-table-column prop="product.name" label="产品名字" />
      <el-table-column prop="product.brand" label="产品品牌" />
      <el-table-column prop="product.model.info" label="产品类别" />
      <el-table-column prop="supplyPrice" label="零售价(元)" />
      <el-table-column prop="suggestedPrice" label="建议价(元)" />
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>存货数量:{{ scope.row.quantity }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag v-if="scope.row.status===0" effect="dark" type="success">有货</el-tag>
              <el-tag v-if="scope.row.status===1" effect="dark" type="info">缺货</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="updateTime" label="更新时间" />
      <el-table-column
        prop="orderQuantity"
        label="订购数量"
      >
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.orderQuantity"
            placeholder="输入订购数量"
            :disabled="disabled"
            @change="warn(scope.row.orderQuantity,scope.row.quantity)"
          />
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        :page-size="limit"
        :total="total"
        style="padding:30px 0;text-align:center;"
        layout="total,prev,pager,next,jumper"
        @current-change="getPagedata"
      />
    </div>
    <el-dialog title="确认订单" :visible.sync="orderDialogVisible" width="50%" center tooltip-effect="dark">
      <el-table :data="productOrderList" stripe style="width: 100%">
        <el-table-column
          prop="product.id"
          label="序号"
        />
        <el-table-column
          prop="product.name"
          label="产品名称"
        />
        <el-table-column
          prop="product.brand"
          label="产品品牌"
        />
        <el-table-column
          prop="supplyPrice"
          label="零售价(元)"
        />
        <el-table-column
          prop="product.updateTime"
          label="更新时间"
        />
        <el-table-column
          prop="orderQuantity"
          label="订购数量"
        />
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="quxiao">取 消</el-button>
        <el-button @click="againDetermine">确 定</el-button>
      </span>
    </el-dialog>
    <div style="margin-top: 20px">
      <el-button @click="submitOrder">提交</el-button>
      <el-button @click="toggleSelection()">取消选择</el-button>
    </div>
  </div>
</template>

<script>
import supplierApi from '@/api/supplier/supplier'
import { mapGetters } from 'vuex'
import orderApi from '@/api/order/order'
export default {
  computed: {
    ...mapGetters([
      'name',
      'id'
    ])
  },
  data() {
    return {
      centerDialogVisible: false,
      orderDialogVisible: false,
      supplierList: [],
      supplier: {},
      supplierChild: {},
      productList: [],
      formData: {},
      current: 1, // 当前页
      limit: 5, // 每页显示记录数
      total: 0, // 总记录数
      multipleSelection: [], // 存储product表格选取的product集合
      disabled: true,
      productOrderList: [],
      orderInfo: {
        accountId: null,
        whoId: null,
        totalPrice: 0,
        productInfo: []
      }
    }
  },
  created() {
    this.getSupplierList()
  },
  methods: {
    getSupplierList() {
      supplierApi.getAllsupplier().then(
        res => {
          this.supplierList = res.data
        }
      )
    },
    opDialog() {
      this.centerDialogVisible = true
    },
    handleCurrentChange(val) {
      this.supplierChild = val
    },
    deselect() { // 取消
      this.supplierChild = ''
      this.centerDialogVisible = false
    },
    determine() { // 确认
      this.supplier = this.supplierChild
      this.getdata()
      this.centerDialogVisible = false
    },
    warn(orderQuantity, quantity) { // 警告提示,判断采购数量和库存数量
      if (orderQuantity > quantity) {
        this.$message({
          showClose: true,
          message: '需求大于输入咯,请先供货',
          type: 'warning'
        })
      }
    },
    error() { // 错误提示
      this.$message({
        showClose: true,
        message: '需要选择数据',
        type: 'error'
      })
    },
    handleSelectionChange(rows) { // val获取复选框选取的数据
      this.multipleSelection = rows
      if (rows) {
        rows.forEach((row) => {
          if (row) {
            this.disabled = false
          } else {
            this.error()
          }
        })
      }
    },
    toggleSelection(rows) { // 取消选择
      if (!rows) {
        this.$refs.multipleTable.clearSelection()
      }
    },
    submitOrder() { // 提交订单
      if (this.multipleSelection.length === 0) {
        this.error()
      } else {
        this.multipleSelection.forEach(val => {
          // eslint-disable-next-line no-undef,no-prototype-builtins
          if (!val.hasOwnProperty('orderQuantity')) {
            this.$message({
              showClose: true,
              message: '未填入需要订购的数量,请先填入',
              type: 'error'
            })
          } else {
            this.productOrderList.push(val)
            this.orderDialogVisible = true
          }
        })
      }
    },
    againDetermine() { // 再次确认订单
      // console.log(this.productOrderList)
      this.orderInfo.accountId = this.id
      this.orderInfo.whoId = this.supplier.id
      this.productOrderList.map(item => {
        const quantity = item.orderQuantity
        const id = item.product.id
        const price = parseInt(item.orderQuantity) * item.supplyPrice
        this.orderInfo.totalPrice = this.orderInfo.totalPrice + price
        const flag = this.orderInfo.productInfo.find(p => p.product === id)
        if (flag) {
          this.orderInfo.productInfo = this.orderInfo.productInfo.filter(ele => ele !== flag)
          this.orderInfo.productInfo.push({ product: id, quantity: quantity })
        } else {
          this.orderInfo.productInfo.push({ product: id, quantity: quantity })
        }
      })
      orderApi.addPurchase(this.orderInfo)
      supplierApi.updateQuantity(this.orderInfo)
      this.getdata()
      this.productOrderList = []
      this.orderDialogVisible = false
    },
    //取消
    quxiao() {
      this.orderDialogVisible = false
    },
    // 处理获取数据(分页)
    getdata() {
      this.formData.supplier = this.supplierChild.name
      this.formData.page = this.current
      this.formData.limit = this.limit
      supplierApi.getAllProduct(this.formData).then(
        res => {
          this.productList = res.data.list
          this.total = res.data.total
        }
      )
    },
    getPagedata(page = 1) {
      this.current = page
      this.formData.page = this.current
      this.formData.limit = this.limit
      this.formData.supplier = this.supplierChild.name
      supplierApi.getAllProduct(this.formData).then(
        res => {
          this.total = res.data.total
        }
      )
    }
  }
}
</script>

<style scoped lang="scss">

</style>
